<!DOCTYPE html>
<html>
<head>
    <title>地址列表</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script type="text/javascript" src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .el-cascader-panel{
            height: 300px !important;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <!-- 表格内容开始 -->
    <div class="layui-card" style="margin-top:20px">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="选择上级">
                <el-cascader v-model="form.cri_superior_code" :options="area_options" :props="{ checkStrictly: true }" style="width: 90%;"></el-cascader>
            </el-form-item>
            <el-form-item label="地区代码">
                <el-input v-model="form.cri_code" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item label="地区名称">
                <el-input v-model="form.cri_name" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item label="经度">
                <el-input v-model="form.cri_lng" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item label="纬度">
                <el-input v-model="form.cri_lat" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即提交</el-button>
                <el-button @click="cancelSub">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<script type="text/javascript">
    const App = {
        data() {
            return {
                area_options:[],
                form: {
                    cri_superior_code: '',
                    cri_code: '',
                    cri_name: '',
                    cri_lng: '',
                    cri_lat: '',
                },
            };
        },
        created: function () {
            this.getAddressList()
        },
        methods: {
            getAddressList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Address://admin_index/getAddressList')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.area_options = res.data
                        }
                    }
                });
            },
            //提交
            onSubmit(){
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Address://admin_index/add')}",
                    data: {
                        ...that.form
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if(res.code === 200){
                            that.$message({
                                type: 'success',
                                message: res.message,
                            })
                            setTimeout(function (){
                                that.cancelSub()
                            },600)
                        }else{
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
            cancelSub(){
                const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }

        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>